<template>
<div class="pb-20 md:pb-28 container m-auto max-w-screen-md px-4 md:px-0">
    <h2 class="text-38px text-black mb-8 font-bold text-center">為何要選擇 COCloud <br class="block md:hidden"> 的 CDN 服務？</h2>  
    <h3 class="border-l-8 border-orange bg-grayLight p-4 text-2xl font-bold text-black">
        常見問題
    </h3>
    <div v-for="item in questionList">
        <div class="flex items-center shadow-sm rounded p-4 justify-between cursor-pointer" @click="item.show = !item.show">
            <div class="flex items-center">
                <span class="inline-block bg-orangeLight w-2 h-2 mr-4 flex-shrink-0"></span>
                <h4 class="inline-block text-black font-bold">
                    {{ item.title }}
                </h4>
            </div>
            <span class="flex-shrink-0">
                <img class="w-5" v-if="!item.show" src="../assets/images/chevron-down.webp">
                <img class="w-5" v-else src="../assets/images/chevron-up.webp">
            </span>
        </div>
        <div class="bg-grayLight rounded transition-all duration-500 overflow-hidden" :class="item.show?'max-h-screen':'max-h-0'">
            <p class="p-4 text-black">
                {{ item.content }}
            </p>
        </div>
    </div>
</div>
</template>
<script setup>
import { reactive } from 'vue'

const questionList = reactive([
    {
        id: 1,
        title: 'COCloud的CDN服務有哪些優勢？',
        content: 'COCloud的CDN服務具有高速、高可靠性、安全性高等優點，可協助客戶提高網站的速度、穩定性和安全性，提供良好的用戶體驗。',
        collapsed: true
    },
    {
        id: 2,
        title: 'COCloud的CDN服務支援哪些類型的內容？',
        content: 'COCloud的CDN服務支援多種類型的內容，包括靜態內容、動態內容、視頻、音頻、圖片等，可滿足客戶不同的內容分發需求。',
        collapsed: true
    },
    {
        id: 3,
        title: 'COCloud的CDN服務如何保護客戶網站安全？',
        content: 'COCloud的CDN服務可提供DDoS攻擊防護、網站加速、數據加密等安全性保護功能，可以保障客戶網站的安全性，有效防止網站被黑客攻擊。',
        collapsed: true
    },
    {
        id: 4,
        title: 'COCloud的CDN服務如何保證高速傳輸？',
        content: 'COCloud的CDN服務擁有全球節點分布，客戶可以就近選擇節點進行加速，可有效減少網絡延遲，提高傳輸速度，保證用戶的高速訪問體驗。',
        collapsed: true
    },
    {
        id: 5,
        title: 'COCloud的CDN服務如何提供高可靠性？',
        content: 'COCloud的CDN服務擁有完善的容錯機制和多層次的備份，可提供高可靠性的內容分發服務，即使發生節點宕機或其他問題，也能快速切換到其他節點，保證客戶網站的穩定運行。',
        collapsed: true
    },
    {
        id: 6,
        title: 'COCloud的CDN服務如何提供客戶支持？',
        content: 'COCloud的CDN服務提供24/7小時的客戶支持服務，可透過郵件、電話、在線客服等方式進行咨詢，以及提供技術支持和緊急維護等服務，保障客戶的正常運營。',
        collapsed: true
    },
    {
        id: 7,
        title: 'COCloud的CDN服務是否可根據客戶需求進行定制化？',
        content: 'COCloud的CDN服務提供個性化的解決方案和定制化的服務，可根據客戶的需求進行定制，如定制節點、緩存規則、傳輸協議等，以滿足客戶的特殊需求。',
        collapsed: true
    }
])

</script>